<!DOCTYPE html>
<html>
<head>
    <base href="${BASE_PATH}">
    <meta charset="UTF-8">
    <meta name="keywords" content="${HEAD_KEYWORDS}">
    <meta name="description" content="${HEAD_DESCRIPTION}">
    <title>${HEAD_TITLE}</title>
    <link rel="stylesheet" href="component/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="component/bootstrap/css/bootstrap-theme.min.css">
    <!--[if lt IE 9]>
    <script src="component/jui/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="page/admin/index/IECompatible.js" type="text/javascript"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="component/jui/js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <!--<![endif]-->
    <script src="component/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="component/echarts/echarts.min.js"></script>
    <!--suppress HtmlUnknownTarget -->
    <script type="text/javascript" src="${BASE_PATH}component/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="page/admin/home/function.js"></script>
    <link rel="stylesheet" href="page/admin/home/main.css">
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="page/admin/home/ie8.css" type="text/css">
    <![endif]-->
</head>
<body id="iframebody">
<div class="container " style="margin-top: 10px;" id="container_i8">
    <div class="row " id="ajaxTabel01">
        <div class="col-md-12 " style="text-align: right;float:left">
            <table class="table2">
                <caption>基本概况</caption>
                <thead>
                <tr>
                    <th>日期</th>
                    <th>活跃用户</th>
                    <th>新增用户</th>
                    <th>访问次数</th>
                    <th>平均使用时长</th>
                    <th>新订单数</th>
                </tr>
                </thead>
                <tbody>
                <tr id="today">
                    <td>今天</td>
                    <td name="uv">0</td>
                    <td name="newUser">0</td>
                    <td name="mainPv">0</td>
                    <td name="avgUse">暂无</td>
                    <td name="newOrder">0</td>
                </tr>
                <tr id="ago1">
                    <td>${ago1}</td>
                    <td name="uv">0</td>
                    <td name="newUser">0</td>
                    <td name="mainPv">0</td>
                    <td name="avgUse">0</td>
                    <td name="newOrder">0</td>
                </tr>
                <tr id="ago2">
                    <td>${ago2}</td>
                    <td name="uv">0</td>
                    <td name="newUser">0</td>
                    <td name="mainPv">0</td>
                    <td name="avgUse">0</td>
                    <td name="newOrder">0</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row" id="ajaxTabel02" >
        <div class="col-md-12 title1 fengxi">
            <span class="fengxi2">用户数据分析</span>
            <div class="tableSearch tittle1">
                <!--<label class="sr-only">区间</label>-->
                <input type="text" id="start_day" name="start_day" value="${ago8}" placeholder="开始时间"
                       onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',onpicked:refreshEcharts})" class="innerinput"/>
                <span class="hen">-</span>
                <input type="text" id="end_day" name="end_day" value="${ago1}" placeholder="结束时间"
                       onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',onpicked:refreshEcharts})" class="innerinput"/>
                <label for="operatorId">运营商：</label>
                <select id="operatorId">
                    <!--:for(entry in configSelect){-->
                    <option value="${entry.key.operatorId}">${entry.key.operatorName}</option>
                    <!--:}-->
                </select>
                <!--:for(entry in configSelect){-->
                <select class="operatorId2" id="${entry.key.operatorId}" style="display:none"
                        title="${entry.value.~size}">
                    <!--:for(child in entry.value) {-->
                    <option value="${child.operatorId}">${child.operatorName}</option>
                    <!--:}-->
                </select>
                <!--:}-->
                <button type="button" onclick="exportUserCount();" title="下载用户数报表" class="btn">
                    下载用户数报表
                </button>
                <button type="button" onclick="exportHeat();" title="下载热度报表" class="btn">
                    下载热度报表
                </button>
                <#haspermission name="admin/home:*">
                    <button type="button" onclick="reStat();" title="对所选时间区间重新进行统计" class="btn">
                        重新统计
                    </button>
                </#haspermission>
            </div>
        </div>
        <div class="col-md-12 mid">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div class="col-md-12 title1" style="display:${showFlag?'block':'none'};margin-top: 0">用户总数统计</div>
            <div id="totalUser" style="width:100%;height:450px;"></div>

            <div class="col-md-12 title1" style="display:${showFlag?'block':'none'}">用户数统计</div>
            <div id="user" style="width:100%;height:450px;"></div>

            <div class="col-md-12 title1" style="display:${showFlag?'block':'none'}">海苔登录用户总数统计</div>
            <div id="htUser" style="width:100%;height:450px;display:${showFlag?'block':'none'}"></div>

            <div class="col-md-12 title1" style="display:${showFlag?'block':'none'}">浏览统计</div>
            <div id="browse" style="width:100%;height:450px;display:${showFlag?'block':'none'}"></div>

            <div class="col-md-12 title1" style="display:${showFlag?'block':'none'}">
                登录用户时间段分布<span class="subtext">(所选日期区间分时间段统计)</span>
            </div>
            <div id="loginTime" style="width:100%;height:400px;display:${showFlag?'block':'none'}"></div>

            <div class="col-md-12 title1 " style="display:${showFlag?'block':'none'}">
                单次时长统计<span class="subtext">(所选日期区间单次使用时长统计)</span>
            </div>
            <div id="sessionTime" style="width:100%;height:400px;display:${showFlag?'block':'none'}"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12  title1 fengxi" style="float:left;">
            <span class="fengxi2">热度排名(日排名/月排名/全部)</span>
            <ul id="chooseDate">
                <li class="showDay blue">今日</li>
                <li class="showMonth">近一个月</li>
                <li class="showOther">所有</li>
            </ul>
        </div>
    </div>
    <div id="ajaxTabel03">

        <!--:#ajax norender hotRank:{-->
        <div class="row " style="border-top:1px solid #ddd" id="showdata">
            <div class="col-md-6 showOther hideIt" style="margin-top: 10px">
                <table class="table" style="background-color:#e6e6e6;">
                    <caption style='background-color:#a9a9a9;text-align: center;font-weight: bolder'>
                        历史观看次数热度排名
                    </caption>
                    <thead style="background-color:#ddd">
                    <tr>
                        <th>排名</th>
                        <th>商品名</th>
                        <th>商品编号</th>
                        <th>热度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--:for(view in historyViews){-->
                    <tr>
                        <td>${viewLP.index}</td>
                        <td>${view.name}</td>
                        <td>${view.productId}</td>
                        <td>${view.view!0}</td>
                    </tr>
                    <!--:}-->
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 showMonth  hideIt" style="margin-top: 10px">
                <table class="table showMonth" style="background-color:#e6e6e6;">
                    <caption style="background-color:#a9a9a9;text-align:center;font-weight:bolder">
                        本月观看次数热度排名
                    </caption>
                    <thead style="background-color:#ddd">
                    <tr>
                        <th>排名</th>
                        <th>商品名</th>
                        <th>商品编号</th>
                        <th>热度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--:for(view in monthViews){-->
                    <tr>
                        <td>${viewLP.index}</td>
                        <td>${view.name}</td>
                        <td>${view.productId}</td>
                        <td>${view.view!0}</td>
                    </tr>
                    <!--:}-->
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 showOther hideIt" style="margin-top: 10px">
                <table class="table" style="background-color:#e6e6e6;">
                    <caption style="background-color:#a9a9a9;text-align:center;font-weight:bolder">
                        历史购买趋势热度排名
                    </caption>
                    <thead style="background-color:#ddd">
                    <tr>
                        <th>排名</th>
                        <th>商品名</th>
                        <th>商品编号</th>
                        <th>热度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--:for(enter in historyEnters){-->
                    <tr>
                        <td>${enterLP.index}</td>
                        <td>${enter.name}</td>
                        <td>${enter.productId}</td>
                        <td>${enter.enter!0}</td>
                    </tr>
                    <!--:}-->
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 showMonth  hideIt" style="margin-top: 10px">
                <table class="table" style="background-color:#e6e6e6;">
                    <caption style="background-color:#a9a9a9;text-align:center;font-weight:bolder">
                        本月购买趋势热度排名
                    </caption>
                    <thead style="background-color:#ddd">
                    <tr>
                        <th>排名</th>
                        <th>商品名</th>
                        <th>商品编号</th>
                        <th>热度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--:for(enter in monthEnters){-->
                    <tr>
                        <td>${enterLP.index}</td>
                        <td>${enter.name}</td>
                        <td>${enter.productId}</td>
                        <td>${enter.enter!0}</td>
                    </tr>
                    <!--:}-->
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 showDay showIt" style="margin-top: 10px">
                <table class="table" style="background-color:#e6e6e6;">
                    <caption style="background-color:#a9a9a9;text-align:center;font-weight:bolder">
                        今日观看次数热度排名
                    </caption>
                    <thead style="background-color:#ddd">
                    <tr>
                        <th>排名</th>
                        <th>商品名</th>
                        <th>商品编号</th>
                        <th>热度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--:for(view in todayViews){-->
                    <tr>
                        <td>${viewLP.index}</td>
                        <td>${view.name}</td>
                        <td>${view.productId}</td>
                        <td>${view.count!0}</td>
                    </tr>
                    <!--:}-->
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 showDay showIt" style="margin-top: 10px">
                <table class="table" style="background-color:#e6e6e6;">
                    <caption style="background-color:#a9a9a9;text-align:center;font-weight:bolder">
                        今日购买趋势热度排名
                    </caption>
                    <thead style="background-color:#ddd">
                    <tr>
                        <th>排名</th>
                        <th>商品名</th>
                        <th>商品编号</th>
                        <th>热度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--:for(enter in todayEnters){-->
                    <tr>
                        <td>${enterLP.index}</td>
                        <td>${enter.name}</td>
                        <td>${enter.productId}</td>
                        <td>${enter.count!0}</td>
                    </tr>
                    <!--:}-->
                    </tbody>
                </table>
            </div>
            <div style="clear: both;"></div>
        </div>
        <!--:}-->
    </div>
    <div class="floatCtro">
        <p class="cur">基本概况</p>
        <p>用户统计</p>
        <p>观看排名</p>
        <!--<p>楼层四</p>
        <p>楼层五</p>
        <p>楼层六</p>
        <p>楼层七</p>-->
        <a>
            <span style="width:60px; height:1px; display:block"></span>
            <span>返回顶部</span>
        </a>
    </div>
    <div class="modal fade" id="reStatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">正在重新统计</h4>
                </div>
                <div class="modal-body">
                    请稍候……
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="loadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">正在加载数据</h4>
                </div>
                <div class="modal-body">
                    请稍候……
                </div>
            </div>
        </div>
    </div>
</div>
<iframe id="downLoadIframe" style="display: none"></iframe>
<script type="text/javascript" src="page/admin/home/main.js"></script>
<script>
    $(function () {
        var AllHet = $(window).height();
        var mainHet = $('.floatCtro').height();
        var fixedTop = (AllHet - mainHet) / 2;
        $('div.floatCtro').css({top: fixedTop + 'px'});
        $('div.floatCtro p').click(function () {
            var ind = $('div.floatCtro p').index(this) + 1;
            var topVal = $('#ajaxTabel0' + ind).offset().top;
            $('body,html').animate({scrollTop: topVal}, 1000)
        });
        $('div.floatCtro a').click(function () {
            $('body,html').animate({scrollTop: 0}, 1000)
        });
        $(window).scroll(scrolls);
        scrolls();
        function scrolls() {
            var f1, f2, f3/*, f4, f5, f6, f7, bck*/;
            var fixRight = $('div.floatCtro p');
            var blackTop = $('div.floatCtro a');
            var sTop = $(window).scrollTop();
            f1 = $('#ajaxTabel01').offset().top;
            f2 = $('#ajaxTabel02').offset().top;
            f3 = $('#ajaxTabel03').offset().top;
            /*f4 = $('#ajaxTabel04').offset().top;
             f5 = $('#ajaxTabel').offset().top;
             f6 = $('#ajaxTabel').offset().top;
             f7 = $('#ajaxTabel').offset().top;*/
            var topPx = sTop + fixedTop;
            $('div.floatCtro').stop().animate({top: topPx});

            if (sTop <= f2 - 100) {
                blackTop.fadeOut(300).css('display', 'none');
            } else {
                blackTop.fadeIn(300).css('display', 'block');
            }

            if (sTop >= f1) {
                fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
            }
            if (sTop >= f2 - 100) {
                fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
            }
            if (sTop >= f3 - 100) {
                fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
            }
            /*if (sTop >= f4 - 100) {
             fixRight.eq(3).addClass('cur').siblings().removeClass('cur');
             }
             if (sTop >= f5 - 100) {
             fixRight.eq(4).addClass('cur').siblings().removeClass('cur');
             }
             if (sTop >= f6 - 100) {
             fixRight.eq(5).addClass('cur').siblings().removeClass('cur');
             }
             if (sTop >= f7 - 100) {
             fixRight.eq(6).addClass('cur').siblings().removeClass('cur');
             }*/
        }
    });
    function toggleClass(classname) {
        $("#showdata").find("div").each(function () {
            if (classname == "showAll") {
                $(this).addClass("showIt").removeClass("hideIt");
            } else {
                console.log(classname);
                if (this.className.indexOf("showIt") != -1) {
                    $(this).removeClass("showIt").addClass("hideIt");
                }
                if (this.className.indexOf(classname) != -1) {
                    $(this).addClass("showIt").removeClass("hideIt");
                }
            }
        });
    }
    var me;
    $("#chooseDate").find("li").click(
        function () {
            $(this).addClass("blue").siblings().removeClass("blue");
            me = this.className.replace("blue", "").replace(/(^\s*)|(\s*$)/g, "");
            console.log(me);
            switch (me) {
                case "showOther":
                    toggleClass(me);
                    break;
                case "showDay":
                    console.log("yes");
                    toggleClass(me);
                    break;
                case "showMonth":
                    toggleClass(me);
                    break;
            }
        }
    );
</script>
</body>
</html>